<template>

  <div id="fangyuan">



    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="formInline.name" placeholder="关键字"></el-input>
      </el-form-item>

      <el-form-item label="房源名称">
        <el-input v-model="formInline.houseName" placeholder="房源名称"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="initData">查询</el-button>
      </el-form-item>
    </el-form>



    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
<!--      <el-table-column
        label="日期"
        width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>-->
      <el-table-column
        prop="id"
        label="编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pic"
        label="图片">
        <template slot-scope="scope">
          <el-image style="width: 100px;height: 100px" :src="'http://192.168.235.131:6100'+scope.row.pic"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="flatName"
        label="名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="roomName"
        label="房源名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="name"
        label="楼盘名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="proportion"
        label="价格"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="floor"
        label="数量"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="htime"
        label="时间"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="sizes"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</template>

<script>



import {list} from "@/api/wishu/fangyuan";

export default {

  name: "fangyuan",
  data(){
    return {
      tableData:[],
      multipleSelection:[],
      current:1,
      sizes:[2,3,5,10],
      size:5,
      total:0,
      formInline:{
        name:"",
        houseName:"",
      },
    }
  },
  created:function(){
    this.initData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    initData(){
      list(this.current,this.size,this.formInline).then((res)=>{
        console.log(res)
        this.tableData=res.records;
        this.total=res.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.initData();
    }
  }
}
</script>

<style scoped>

</style>
